<template>
  <uv-skeletons :loading="taskForm.id ? false : true" :skeleton=" [{ type: 'line', num: 3, gap: '20rpx' }]">
    <div class="bfff p1756534975" :class="'p1756534975-' + taskForm.type + '-' + taskForm.service_status">
      <div class="fac jcsb">
        <div class="fz30 fac pb20">
          <div v-if="taskForm.service_status != 4 && taskForm.service_status != 5" style="display: inline;color: #F39800;">{{taskForm.desc}}</div>
          <div class="fz40" style="font-weight: 500;" v-if="taskForm.service_status == 4">{{taskForm.type == 3 || taskForm.type == 1 || taskForm.type == 2 ? '订单已送达' : '订单已完成'}}  </div>
          <div class="fz40 " style="font-weight: 500;color: #E60012; " v-if="taskForm.service_status == 5">订单已取消</div>
          <div v-if="typeForm[taskForm.type]"
            :style="{color: typeForm[taskForm.type].color, background: typeForm[taskForm.type]['bgColor']}"
            class="p1756533943 fz28">{{typeForm[taskForm.type].text}}</div>
        </div>
        <div v-if="taskForm.service_status != 4 && taskForm.service_status != 5" class="fz30"
          style="font-weight: 600;color: #E60012;">
          ¥<div style="display: inline;" class="fz46">{{taskForm.order_price}}</div>
        </div>
      </div>
      <div class="f  pt20  ">
        <u-line v-if="taskForm.service_status != 4 && taskForm.service_status != 5" :form="taskForm" :deliveryType="deliveryType" :serviceStatus="taskForm.service_status" :clientHeight="clientHeight"></u-line>
        <div class="pl30 p1756964647541">
          <div ref="address" id="address">
            <div v-if="taskForm.type == 1 || taskForm.type == 2" class="fz34  p1756524270" style="line-height: 1.2;">
              <div v-if="taskForm.service_status == 4 || taskForm.service_status == 5" class="yuan1">{{taskForm.type ==
                3
                ? '买' : '取'}}</div>
              <div>
                <div class="pickup_address_storey" style="display: inline;font-weight: 700;">
                  {{taskForm.pickup_address_storey}}</div>
                <div class="" v-if="taskForm.pickup_address_house_number" style="display: inline;line-height: 1;">
                  ({{taskForm.pickup_address_house_number}})</div>
            <div class="fz30 pt10 p1756525801  " v-if="(taskForm.type == 1 || taskForm.type == 2) && taskForm.pickup_address" style="color: #595757;line-height: 1.2;"> {{taskForm.pickup_address}}</div>

              </div>
            </div>
            <div v-if="taskForm.type == 3" class="fz34 p1756524270">
              <div v-if="taskForm.service_status == 4 || taskForm.service_status == 5" class="yuan1">{{taskForm.type ==  3 ? '买' : '取'}}</div>
              <div>
                <div class="purchase_shop_title" style="line-height: 1.2;font-weight: 700;">{{taskForm.purchase_address_type == 2 ? '就近购买' : taskForm.purchase_shop_title}}</div>
                <div class="fz30 pt10 p1756525801 pb30 " v-if="(taskForm.type == 3) && taskForm.purchase_shop_address && taskForm.purchase_address_type != 2"
                  style="color: #595757;display: inline;line-height: 1.2;">
                  {{taskForm.purchase_shop_address}}</div>
              </div>
            </div>

            <div v-if="(taskForm.type == 4 ||taskForm.type == 5) && taskForm.service_status != 4"
              class="fz34 p1756524270">
              <div style="display: inline;line-height: 1.2;font-weight: 400;">你的位置</div>
            </div>
          </div>
          <div class="fz34 delivery_address_storey pt40" style="line-height: 1.2;font-weight: 700;">
            <div style="background-color: #00AF53;"
              v-if="(taskForm.type == 1 || taskForm.type ==2 || taskForm.type ==3) && (taskForm.service_status == 4 || taskForm.service_status == 5)"
              class="yuan1">送</div>
            <div style="background-color: #00AF53;"
              v-if="(taskForm.type == 4 || taskForm.type == 5)  && (taskForm.service_status == 4 || taskForm.service_status == 5)"
              class="yuan1">服</div>
            <div>
              <div style="display: inline;">
                {{taskForm.delivery_address_storey}}
                <div class="" v-if="taskForm.delivery_address_house_number" style="display: inline;line-height: 1;">
                  ({{taskForm.delivery_address_house_number}})</div>
              </div>
              <div class="fz30  pt20 " v-if="(taskForm.service_status == 4 || taskForm.service_status == 5) "
                style="color: #595757;line-height: 1.2;"> {{taskForm.delivery_address_name}}&nbsp;&nbsp;
                {{taskForm.delivery_address_tel}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </uv-skeletons>
</template>
<script>
  import lineVue from './line.vue'
  import dataJsonMixin from '../mixin/dataJson.js'
  export default {
    props: {
      serviceStatus: {
        type: Number,
        default: 1
      },
      deliveryType: {
        type: Number,
        default: -1
      },
      taskForm: {
        type: Object,
        default: {}
      },
    },
    components: {
      'u-line': lineVue,
    },
    mixins: [dataJsonMixin],
    data() {
      return {
        timer: null,
        clientHeight: 0
      }
    },
    mounted() {
      this.lineHeightFun()
    },
    methods: {
      lineHeightFun() {
        this.$nextTick(() => {
          this.timer = setInterval(() => {
            if (this.$refs.address && this.$refs.address.clientHeight) {
              this.clientHeight = this.$refs.address.clientHeight
              clearInterval(this.timer)
            } else {
              uni.createSelectorQuery().in(this).select("#address").boundingClientRect((data) => {
                if (data) {
                  this.clientHeight = 0
                  this.clientHeight = data.height
                }
              }).exec();
            }
          }, 50)
          this.setTimeoutFun(50)
          setTimeout(() => {
            clearInterval(this.timer)
            this.setTimeoutFun(0)
          }, 3000)
        })

      },
      setTimeoutFun(t) {
        setTimeout(() => {
          if (this.$refs.address && this.$refs.address.clientHeight && this.$refs.address.clientHeight != this.clientHeight) {
            this.clientHeight = 0
            this.clientHeight = this.$refs.address.clientHeight
          } else {
            uni.createSelectorQuery().in(this).select("#address").boundingClientRect((data) => {
              if (data) {
                this.clientHeight = 0
                this.clientHeight = data.height
              }
            }).exec();
          }
        }, t)
      },
    },
  }
</script>
<style lang="scss" scoped>
@import '../common.scss';
  .fz46 {
    font-size: 46rpx;
  }

  .pt40 {
    padding-top: 40rpx;
  }

  .p1756533943 {
    border-radius: 10rpx;
    display: inline;
    padding: 5rpx 10rpx;
    margin-left: 10rpx;
  }

  .p1756534975 {
    color: #333;
    border-radius: 20rpx;
    padding: 20rpx 20rpx 30rpx 30rpx;
    box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  }

  .p1756534975-5-5,
  .p1756534975-4-5,
  .p1756534975-5-4,
  .p1756534975-4-4 {
    .delivery_address_storey {
      padding-top: 3rpx!important;
      display: flex;
      font-weight: normal !important;
    }

    .p1756964647541 {
      padding-left: 0!important;
      font-weight: normal !important;
    }
  }

  .p1756534975-1-4,
  .p1756534975-1-5,
  .p1756534975-2-4,
  .p1756534975-2-5,
  .p1756534975-3-4,
  .p1756534975-3-5 {
    .delivery_address_storey {
      display: flex!important;
    }

    .purchase_shop_title,
    .p1756525801,
    .delivery_address_storey,
    .pickup_address_storey,
    .p1756524270 {
      font-weight: normal !important;
    }

    .p1756524270 {
      display: flex!important;
    }

    .p1756964647541 {
      padding-left: 0!important;
    }
  }

  .yuan1 {
    width: 45rpx;
    min-width: 45rpx;
    height: 45rpx;
    background: #F9842D;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    border-radius: 50%;
    margin-right: 20rpx;
    padding: 5rpx;
    box-sizing: border-box;

  }
</style>